<template>
  <div class="Approval-box">
    <el-container>
      <el-aside width="400px">
        <div class="block">
          <el-link type="success" @click="ClickApproval">单据审批</el-link>
          <el-timeline>
            <el-timeline-item v-for="item in activities" :color="item.color" size="large " placement="top">
              <el-card>
                <div class="Approval-card">
                  <img src="https://img.shetu66.com/2023/07/18/1689659210837955.png" />
                  <div>
                    <h4>{{ item.dept }}-{{ item.name }}</h4>
                    <p>{{ item.timestamp }}-{{ item.state }}</p>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-aside>
      <el-container>
        <el-main>
          <div class="title">
            <h2>2025XXX行动</h2>
          </div>
          <el-table :data="tableData" border stripe style="width: 100%" :height="tableHeight">
            <el-table-column prop="class" label="分类" min-width="100" align="center" />
            <el-table-column prop="name" label="任务标题" min-width="180" />
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column prop="content1" label="具体任务" min-width="180">
              <template slot-scope="scope">
                <div v-html="scope.row.content1"></div>
              </template>
            </el-table-column>

            <el-table-column prop="content3" label="完成标准" min-width="180">
              <template slot-scope="scope">
                <div v-html="scope.row.content3"></div>
              </template>
            </el-table-column>
            <el-table-column prop="content4" label="预期标志性成果" min-width="180">
              <template slot-scope="scope">
                <div v-html="scope.row.content4"></div>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="要求完成时间" min-width="120" align="center" />
            <el-table-column prop="dept" label="责任部门" min-width="180" align="center" />
          </el-table>
        </el-main>
      </el-container>
    </el-container>
    <h3>审批</h3>
    <div style="width: 100%; background-color: #fff">
      <el-form :model="form" label-width="100px">
        <el-form-item label="审批级次">
          <span>{{ form.name }}</span>
        </el-form-item>
        <el-form-item label="审批状态">
          <el-radio-group v-model="form.resource">
            <el-radio label="同意"></el-radio>
            <el-radio label="不同意"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批意见">
          <el-input type="textarea" :autosize="{ minRows: 8, maxRows: 8 }" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </div>
    <!--弹出框 -->
    <el-dialog title="提交审批" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="100px">
        <el-form-item>
          <el-radio-group v-model="form.resource">
            <el-radio label="同意"></el-radio>
            <el-radio label="不同意"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批意见">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FillPageV from '@/views/TaskDetails/FillPageV.vue'
export default {
  components: { FillPageV },
  data() {
    return {
      tableHeight: '',
      form: {
        resource: '同意',
        name: '总经理'
      },
      tableData: [
        {
          class: `定方向`,
          name: `1.强化战略管理支撑体系`,
          content1: `搭建战略管控新体系。`,
          content2: ``,
          content3: `1分解战略任务，纳入年度考核；<br/>2.研究经营发展改革重难点问题，推动协调解决；<br/>3.季度开展战略规划执行分析；<br/>4.每年底开展战略回顾复盘；<br/>5.视情况开展战略调整升级。`,
          content4: `形成战略流程管理体系。`,
          date: `2025-05-01`,
          dept: `部门1;部门2;部门3`
        },
        {
          class: `定方向`,
          name: `1.强化战略管理支撑体系`,
          content1: `以做实二级平台为重点，推动相关子公司厘清管理定位，调整管理方式，提升管理水平，切实发挥二级平台管资产、管运营的功能作用。`,
          content2: ``,
          content3: `以做实二级平台为导向，督促相关子公司转变管控角色，优化组织体系，提升管理水平，强化运营能力，切实发挥好二级平台管资产、管运营的功能。`,
          content4: `二级平台公司（保利文化、保利久联）对一线业务形成穿透管理机制。`,
          date: `2025-12-01`,
          dept: `部门1;部门2`
        },
        {
          class: `定方向`,
          name: `2.深入谋划“十五五”发展规划`,
          content1: `深入子公司走访调研，进一步把握相关业务的产业政策、市场形势、发展趋势，并结合上级部署要求和集团功能定位、主责主业和拟培育方向，提出集团“十五五”时期战略定位、主攻方向、发展目标、主要路径等，编制集团公司“十五五”规划指引及总体规划。`,
          content2: `1.指导各子公司开展“十五五”规划前期分析，通过开展行业内外走访调研等方式，切实把握好各业务产业政策、市场形势、发展趋势。<br/>2.组织各子公司开展“十五五”规划思路研究，结合产业发展形势分析情况，提出本企业“十五五”时期战略思路、发展目标等。<br/>3.根据国资委“十五五”规划编制有关安排和集团公司战略发展相关部署，结合各子公司“十五五”规划编制思路，综合分析、深入论证，初步明确集团“十五五”时期战略定位、主攻方向、发展目标、主要路径`,
          content3: `1.各子公司初步明晰本企业“十五五”发展思路<br/>2.集团初步明确“十五五”发展思路`,
          content4: `1.集团“十五五”发展初步思路;<br/>2.集团“十五五”规划总体框架;<br/>3.集团“十五五”发展总体规划;`,
          date: `2025-03-31;2025-06-31;2025-08-31`,
          dept: `部门3;部门4`
        },
        {
          class: `定方向`,
          name: `2.深入谋划“十五五”发展规划`,
          content1: `以集团总体规划（即集团五年规划）为指引，加快健全包括各管理条线职能规划、各子公司五年规划、重点业务领域（含拟培育业务）专项规划等在内的二级规划体系。`,
          content2: `搭建集团战略规划体系，提升集团战略支撑能力。`,
          content3: `各部门、各子公司根据集团公司“十五五”规划编制总体部署，同步开展相关职能条线、业务板块“十五五”规划研究制定工作，积极构建包括集团总体规划、相关职能条线规划、子公司业务规划的集团战略规划体系`,
          content4: `1.相关部门形成重点管理条线职能规划<br/>2.各子公司形成五年规划、重点业务领域(视情)专项规划`,
          date: `2025-10-03`,
          dept: `部门2;部门3`
        }
      ],
      dialogFormVisible: false,
      activities: [
        {
          dept: '综管',
          name: '综管',
          timestamp: '2025-04-24 20:46:05',
          color: 'rgb(39, 141, 202)',
          state: '发起'
        },

        {
          dept: '部门领导',
          name: '部门领导',
          timestamp: '2025-05-07 15:47:33',
          color: 'rgb(39, 141, 202)',
          state: '同意'
        },
        {
          dept: '分管副总',
          name: '分管副总',
          timestamp: '2025-05-07 15:47:33',
          color: 'rgb(39, 141, 202)',
          state: '同意'
        },
        {
          dept: '总经理',
          name: '总经理',
          timestamp: '2025-05-07 15:47:33',
          color: 'rgb(231, 155, 39)',
          state: '待审批'
        }
      ]
    }
  },
  created() {
    this.tableHeight = window.innerHeight - 70
  },
  methods: {
    ClickApproval() {
      this.dialogFormVisible = true
    }
  }
}
</script>

<style scoped>
.Approval-box {
  padding: 20px;
  background-color: #fdfbf2;
  position: relative;
}

.el-card {
  background-color: transparent;
}

.Approval-box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.Approval-box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.Approval-box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.Approval-box >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.title {
  display: flex;
  padding-bottom: 33px;
}
h2 {
  margin: 0 auto;
}
.el-aside {
  background-color: #fdfbf2;
  margin-bottom: 0px;
}

.el-main {
  width: 100%;
  /* background-color: #b3c0d1; */
  color: #333;
  text-align: center;
  padding: 0px;
}
.el-timeline {
  padding: 0;
}

.Approval-box >>> .Approval-card {
  display: flex;
}
img {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  margin: auto;
  object-fit: cover;
}
.el-link {
  margin-bottom: 10px;
}
</style>
